<template>
  <view class="review-write">
    <!-- 商品信息 -->
    <view class="product-info">
      <image 
        :src="url('s', product.image, 'png')"
        mode="aspectFill"
        class="product-image"
      />
      <view class="product-detail">
        <text class="product-name">{{ product.name }}</text>
        <text class="product-spec">{{ product.specs }}</text>
      </view>
    </view>
    
    <!-- 评分 -->
    <view class="rating-view">
      <text class="view-title">商品评分</text>
      <view class="rating">
        <text 
          v-for="i in 5" 
          :key="i"
          :class="['bi', i <= rating ? 'bi-star-fill' : 'bi-star']"
          @tap="setRating(i)"
        ></text>
      </view>
    </view>
    
    <!-- 评价内容 -->
    <view class="content-view">
      <text class="view-title">评价内容</text>
      <textarea
        v-model="content"
        placeholder="请分享您对商品的使用感受"
        class="review-content"
      />
    </view>
    
    <!-- 图片上传 -->
    <view class="upload-view">
      <text class="view-title">上传图片</text>
      <view class="upload-list">
        <view 
          v-for="(image, index) in images" 
          :key="index"
          class="image-item"
        >
          <image 
            :src="image"
            mode="aspectFill"
            class="preview-image"
          />
          <text 
            class="bi bi-x-circle-fill delete-btn"
            @tap="deleteImage(index)"
          ></text>
        </view>
        <view 
          v-show="images.length < 6"
          class="upload-btn"
          @tap="chooseImage"
        >
          <text class="bi bi-plus"></text>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="footer">
      <button class="btn-submit" @tap="submitReview">发布评价</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const url = $url

const product = ref({
  name: '傩面挂饰',
  image: '1',
  specs: '大号'
})

const rating = ref(5)
const content = ref('')
const images = ref([])

const setRating = (value) => {
  rating.value = value
}

const chooseImage = () => {
  uni.chooseImage({
    count: 6 - images.value.length,
    success: (res) => {
      images.value.push(...res.tempFilePaths)
    }
  })
}

const deleteImage = (index) => {
  images.value.splice(index, 1)
}

const submitReview = () => {
  if (!content.value.trim()) {
    return uni.showToast({
      title: '请输入评价内容',
      icon: 'none'
    })
  }
  
  uni.showToast({
    title: '评价发布成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss" scoped>
.review-write {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.product-info {
  background: #fff;
  padding: 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}

.product-detail {
  flex: 1;
  margin-left: 20rpx;
}

.product-name {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.product-spec {
  font-size: 24rpx;
  color: #999;
}

.rating-view,
.content-view,
.upload-view {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.view-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.rating {
  display: flex;
  gap: 20rpx;
  
  .bi {
    font-size: 48rpx;
    color: #ffd700;
  }
}

.review-content {
  width: 100%;
  height: 240rpx;
  font-size: 28rpx;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 10rpx;
}

.upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.delete-btn {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  color: #ff4d4f;
  font-size: 40rpx;
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #f8f8f8;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .bi {
    font-size: 48rpx;
    color: #999;
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.btn-submit {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: var(--td-brand-color);
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
}
</style> 